<template>
  <div ref="GridTable" class="GridTable">
    <svg-loading v-if="loading" />
    <vxe-grid v-show="isTableData" ref="xGrid" border resizable show-overflow sync-resize show-header-overflow
      empty-text="暂无数据" :max-height="containerHeight" :row-config="{ isCurrent: true, isHover: true }"
      :column-config="{ isCurrent: true, isHover: true }" :loading="loading || gridLoading"
      :loading-config="{ icon: 'el-icon-loading', text: '数据正在加载中...' }" :scroll-x="{ gt: 10 }" :scroll-y="{ gt: 10 }"
      @cell-click="cellClickEvent" />
    <div v-if="!loading && !isTableData" class="not-data">
      <el-empty description="暂无数据" />
    </div>
    <el-dialog :title="dialogTitle" v-model.visible="dialogVisible" width="600px" top="0" append-to-body
      class="cellDialog dialog-vertical-center">
      <pre class="dialogValue" v-html="dialogValue" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from "vue"
import { debounce } from 'throttle-debounce'
import elementResizeDetectorMaker from 'element-resize-detector'
import SvgLoading from '../../components/svgLoading.vue'
import { isNull, isBoolean } from 'lodash'
import { isArray, isNumber, isObject, isUndefined, isString } from 'src/utils/designerTool/validate'
const cellLength = 200
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})
const containerHeight = ref(0)
const isTableData = ref(false)
const debounceFunc = ref(null)
const gridLoading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogValue = ref('')
const erd = elementResizeDetectorMaker()
const GridTable = ref(null)
const xGrid = ref(null)
onMounted(() => {
  debounceFunc.value = debounce(100, updateHeight)
  erd.value.listenTo(GridTable.value, () => {
    gridLoading.value = true
    debounceFunc()
  })
})

function init(data = {
  resultColumn: [],
  resultData: []
}) {
  updateHeight(true)
  data.resultColumn.forEach((row: any) => {
    row['slots'] = {
      // 使用渲染函数
      default: (value: any) => {
        let rowValue = value.row[value.column.field]
        if (isUndefined(rowValue) || isNull(rowValue)) {
          rowValue = ''
        } else if (isObject(rowValue) || isArray(rowValue)) {
          rowValue = JSON.stringify(rowValue)
        } else if (isBoolean(rowValue)) {
          rowValue = rowValue.toString()
        } else if (isNumber(rowValue) || !isString(rowValue)) {
          rowValue += ''
        }
        const rowValueLength = rowValue.length > cellLength
        return [
          `<text-tooltip class= ${rowValueLength ? 'cursorPointer' : ''}
          content = ${rowValueLength ? (rowValue.substring(0, cellLength) + '...  点击单元格查看更多') : rowValue} />`]
      }
    }
  })
  xGrid.value.reloadColumn(data.resultColumn)
  xGrid.value.reloadData(data.resultData)
  isTableData.value = data.resultColumn.length || data.resultData.length
  setTimeout(() => {
    xGrid.value.scrollTo(0, 0)
  }, 10)
}
function updateHeight(init: any) {
  if (init || isTableData.value) {
    containerHeight.value = GridTable.value.clientHeight
    setTimeout(() => {
      gridLoading.value = false
    }, 500)
  }
}
function cellClickEvent(value: any) {
  const rowValue = value.row[value.column.field] || ''
  if (rowValue.length > cellLength) {
    dialogTitle.value = value.column.title
    dialogVisible.value = true
    dialogValue.value = rowValue
  }
}
</script>

<style lang="scss" scoped>
.GridTable {
  width: 100%;
  height: 100%;

  .not-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
</style>
<style lang="scss">
.cellDialog {
  .el-dialog__body {
    padding: 0 20px 14px;

    .dialogValue {
      line-height: 1.4;
      color: #000000;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif;
      margin: 0;
      white-space: pre-line;
    }
  }
}
</style>
